import * as ol from '../ol'
import 'ol/ol.css';

/**
 * 可选参数如下
 * @typedef {string} position
 * @property {string} [top-left] - 左上角
 * @property {string} [top-center] - 顶部中心
 * @property {string} [top-right] - 右上角
 * @property {string} [center-left] - 左侧中心
 * @property {string} [center-center] - 中心
 * @property {string} [center-right] - 右侧中心
 * @property {string} [bottom-left] - 左下角
 * @property {string} [bottom-center] - 底部中心
 * @property {string} [bottom-right] - 右下角
 */

// 自定义弹出类，继承自 ol.Overlay
class Popup extends ol.Overlay {
    /**
     * @constructor Popup
     * @description 弹出框。
     * @param {String | HTMLElement} element - 弹出框
     * @param {Object} [options] - 初始化参数
     * @property {position} [options.positioning=center-left] - Popup放置的位置。
     * @example
     * // 创建自定义弹出对象
     *  const popup = new GISMap.Popup('popup');
     *  // 监听地图的单击事件
     *  map.on('click', (event) => {
     *    const position = event.coordinate; // 获取点击位置
     *    popup.open(position);
     *  });
     */
    constructor(element,options) {
        super({
            //要转换成overlay的HTML元素
            element: document.getElementById(element),
            //当前窗口可见
            autoPan: true,
            //Popup放置的位置
            positioning: 'center-left',
            //是否应该停止事件传播到地图窗口
            stopEvent: false,
        });
        this.autoPanAnimation = {
            //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度
            duration: 250
        }
        // 初始位置为 undefined
        this.setPosition(undefined);
    }
    /**
     * 显示Popup。
     * @method
     * @name Popup#open
     * @param {Array} position - 显示Popup的坐标，使用屏幕坐标系。
     * @returns {void}
     */
    open(position) {
        this.setPosition(position);
        this.getElement().style.display = 'block';
        map.addOverlay(this);
    }
    /**
     * 移除Popup。
     * @method
     * @name Popup#close
     * @returns {void}
     */
    close() {
        this.getElement().style.display = 'none';
        map.removeOverlay(this);
    }
}

export default Popup